import React from "react";
import { connect } from "react-redux";

class App extends React.Component {
    render() {
        const { count, dispatch } = this.props;
        return (
            <div>
                <p>count:{count}</p>
                <button
                    onClick={() => {
                        dispatch({ type: "add" });
                    }}>
                    count + 1
                </button>
            </div>
        );
    }
}

function AppFunc(props) {
    const { count, dispatch } = props;
    return (
        <div>
            <p>count:{count}</p>
            <button
                onClick={() => {
                    dispatch({ type: "add", payload: 20 });
                }}>
                count + 20
            </button>
        </div>
    );
}
// connect 高阶组件
// connect 作为高阶组件可以用在函数组件和类组件上
// connect 把redux数据给到组件的props上 把dispatch函数也给到了props上
// 注意点 connect函数必须返回一个新的state
export default connect((state) => {
    return { ...state }; //connect函数必须返回一个新的state
})(AppFunc);
